<template>
	<view class="project-status" :style="{height: `calc(100vh - ${topHeight});`}">
		<navBar title="工程状态"  @goBack="uni.navigateBack()" ></navBar>
		
		<view class="tab-content" :style="{marginTop: `${extraHeight}`}">
			<view @click="changeType(index)" v-for="(item, index) in typeArray" :key="index" class="tab-item" :class="[index === typeIndex ? 'active' : '']">{{ item.label }}</view>
		</view>
		
		<view v-show="typeArray[this.typeIndex] && typeArray[this.typeIndex].value === 'wg'" class="select-date">
			<view class="label required">完工时间</view>
			<view @click="calendarVisible = true" class="date-content">
				<view class="date-text" :class="[!currentDateValue ? 'gray-text' : '']">{{ currentDateValue ? currentDateValue : '请选择时间' }}</view>
				<u-icon name="arrow-right" color="#a7aebd" size="20"></u-icon>
			</view>
		</view>
		
		<view class="confirm-btn">
			<u-button @click="sumbit" :loading="loading" type="primary" text="确定"></u-button>
		</view>
		
		<u-datetime-picker v-if="currentDateValueTime || calendarVisible" v-model="currentDateValueTime"  @cancel="calendarVisible = false" @confirm="confirmCalendar" :show="calendarVisible" mode="date" :maxDate="dateModel.end"></u-datetime-picker>
	</view>
</template>

<script>
	import { projectManagementUpdatePmState } from '@/api/comprehensive/comprehensive.js'
	import { getSystemHeightInfo } from '@/utils/common.js'
	import { handleFormatDate } from "@/utils/date.js"
	export default {
		data() {
			return {
				// 类型类别
				typeArray: [
					{ label: "在建", value: "zj" },
					{ label: "暂停", value: "zt" },
					{ label: "完工", value: "wg" }
				],
				// 当前选中的类别下标
				typeIndex: -1,
				// 时间弹框是否可见
				calendarVisible: false,
				// 当前日期的值
				currentDateValue: null,
				// 当前日期的值
				currentDateValueTime: null,
				// 日期数据
				dateModel: {
					end: 0,
					monthNum: 60
				},
				// 是否加载中
				loading: false,
				// 项目id
				id: null,
				// 尺寸信息
				systemHeightInfo: {}
			}
		},
		computed: {
			// 顶部高度
			topHeight() {
				const { stateHeight, navbarHeight } = this.systemHeightInfo
				return `${(stateHeight + navbarHeight) || 0}px`
			},
			// 额外高度
			extraHeight() {
				const { stateHeight, bottomHeight, navbarHeight } = this.systemHeightInfo
				return `${(stateHeight + bottomHeight + navbarHeight) || 0}px`
			}
		},
		onLoad(options) {
			const year = new Date().getFullYear()
			this.dateModel.end = new Date(`${year + 2}-01-01`).getTime()
			if (options.code) {
				this.typeIndex = this.typeArray.findIndex(item => item.value === options.code)
			}
			if (options.date) {
				this.currentDateValue = JSON.parse(options.date) || ''
				this.currentDateValueTime = new Date(JSON.parse(options.date)).getTime() || ''
			}
			this.id = Number(options.id)
			this.systemHeightInfo = getSystemHeightInfo()
		},
		methods: {
			/** 改变类型 */
			changeType(index) {
				this.typeIndex = index
			},
			
			/** 确认选择时间 */
			confirmCalendar(event) {
				const { value } = event
				this.currentDateValue = value ? handleFormatDate(new Date(value)) : undefined
				this.calendarVisible = false
			},
			
			/** 提交 */
			sumbit(event) {
				if (this.loading || !this.id) {
					return
				}
				if (this.typeArray[this.typeIndex].value === 'wg' && !this.currentDateValue) {
					uni.showToast({ icon: "none", title: "请选择完工时间" })
					return
				}
				this.loading = true
				projectManagementUpdatePmState({
					id: this.id,
					pmState: this.typeArray[this.typeIndex].value,
					actualEndTime: this.typeArray[this.typeIndex].value === 'wg' ? this.currentDateValue : undefined
				}).then(res => {
					if(res.success && res.status === 1) {
						uni.showToast({ icon: "none", title: res.message })
						const timeout = setTimeout(() => {
							uni.navigateBack()
							this.loading = false
							clearTimeout(timeout)
						}, 1500)
					}
				}).catch(() => {
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.project-status {
		min-height: 100vh;
		box-sizing: border-box;
		padding-top: 15px;
		background: #f5f7fa;
		font-size: 16px;
		.tab-content {
			height: 43px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;
			background: #fff;
			.tab-item {
				color: #445469;
				font-family: PingFang;
				font-weight: 500;
				flex: 1;
				line-height: 43px;
				position: relative;
				&::after {
					content: "";
					background: #e1e5ed;
					height: 1px;
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
				}
				&.active {
					color: #2f80ed;
					font-size: 18px;
					font-weight: bold;
					&::after {
						background: #2f80ed;
					}
				}
			}
		}
		.select-date {
			margin-top: 6px;
			padding: 0 18px 0 14px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			.required {
				&::before {
					content: "*";
					color: #ff6a6a;
				}
			}
			.laebl {
				color: #445469;
				font-weight: bold;
				font-family: PingFang;
			}
			.date-content {
				display: flex;
				align-items: center;
				.date-text {
					color: #22204e;
					font-weight: bold;
					font-family: PingFang;
					margin-right: 12px;
					line-height: 29px;
				}
				.gray-text {
					color: #c7c7c7;
					font-weight: 500;
					font-family: PingFang;
					font-size: 16px;
				}
			}
		}
		.confirm-btn {
			height: 45px;
			line-height: 45px;
			margin: 0 17px 0 13px;
			width: calc(100% - 30px);
			position: fixed;
			bottom: 0;
			left: 0;
		}
	}
</style>
